import { WeElement, define } from 'omi'
import './index.css'

import api from '../../../api/api.js'
import { get, post, loading, toastSuccess } from '../../../utils/util.js'

const { wxParse} = require('../../../wxParse/wxParse.js');


define('scenicDetail', class extends WeElement{
  config = {
    navigationBarTitleText: '发现页景点详情页'
  }

  data={
    activity_carousel: [],
    indicatorDots: true,
    autoplay: true,
    interval: 2000,
    duration: 1000,
    circular: true,
    activity_detail: '',
    isSign: false,
    lastScrollTop: 0,
    isScroll: true,
    userName: "",
    userPhone: "",
    activity_id: '',
    is_join: false//报名
  }

  install(options){
    loading('加载中...')
    this.signUp = this.signUp.bind(this);
    this.data.activity_id = options.activity_id;//活动id
    post(api.activity_detail, { activity_id: options.activity_id}).then((res)=>{
      console.log(res);
      this.data.activity_carousel = res.data.activity_carousel;//轮播图
      this.data.activity_detail = res.data.activity_detail;//详情富文本域
      this.data.is_join = res.data.is_join;//是否报名
      wxParse('activity_detail', 'html', this.data.activity_detail, this, 0);
      this.update();
      wx.hideLoading();
    })

  }

  signUp=()=>{
    this.data.isSign = true;
    this.update()
    console.log(this.data.isSign)
  }

  getName=(e)=>{
    console.log(e.detail.value)
    this.data.userName = e.detail.value;
  }

  getPhone=(e)=>{
    console.log(e.detail.value)
    this.data.userPhone = e.detail.value;
  }

  submit=()=>{
    let phoneRegExp = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/;
    
    if (!this.data.userName) {
      wx.showToast({
        title: '请输入名字',
        icon: "none"
      })
    } else if (!phoneRegExp.test(this.data.userPhone)) {
      wx.showToast({
        title: '请输入正确的手机号',
        icon: "none"
      })
    } else {
      loading('提交中...');
      post(api.join_activity,{
        activity_id: this.data.activity_id,
        name: this.data.userName,
        phone: this.data.userPhone
      }).then((res)=>{
        toastSuccess('报名成功!');
        this.data.isSign = false;
        this.data.is_join = true;
        this.update();
      })
    }
  }

  hideWrap=()=>{
    this.data.isSign = false;
    this.update();
  }

  showWrap=()=>{
    this.data.isSign = true;
    this.update();
  }

  onPageScroll(e){
    if (e.scrollTop >= this.data.lastScrollTop){
      console.log(true)
      this.data.isScroll = true;
    }else{
      console.log(false)
      this.data.isScroll = false;
    }
    this.data.lastScrollTop = e.scrollTop;
    this.update();
    // console.log(e.scrollTop)
  }

  render(){
    return(
      <view class="scenic_detail_wrap">
        <import src="../../../wxParse/wxParse.wxml" />
        <swiper
          indicator-dots={indicatorDots}
          autoplay={autoplay}
          interval={interval}
          duration={duration}
          circular={circular}
          indicator-color="rgba(255,255,255,0.5)"
          indicator-active-color="#fff"
        >
        {
            activity_carousel.map((item,index)=>(
              <block>
                <swiper-item key={index}>
                  <image src={item} class="slide-image" mode="widthFix"/>
                </swiper-item>
              </block>
            ))
        }
        </swiper>

        <view class="des_list">
          <template is="wxParse" data="{{wxParseData:activity_detail.nodes}}" />
        </view>
        {
          isScroll && <view class="sign_up_btn">
            <button bindtap={signUp} disabled={is_join}>{!is_join?'我要报名':'已报名'}</button>
          </view>
        }
        
        {
          this.data.isSign && <view class="sign_wrap" bindtap={hideWrap}>
            <view class="sign_info" catchtap={showWrap}>
              <view>
                <text>请输入姓名</text>
                <input type="text" name="user_name" class="user_name" maxlength="15" bindblur={getName}/>
              </view>
              <view>
                <text>手机电话</text>
                <input type="number" name="user_phone" class="user_phone" maxlength="11" bindblur={getPhone}/>
              </view>
              <button class="submit" catchtap={submit}>提交</button>
            </view>
          </view>
        }
        
        
      </view>
    )
  }
})